<script setup>
import BpmnJS from 'bpmn-js/lib/Modeler';
const props = defineProps({
  diagramResourceRaw: {
    type: String,
    required: true
  }
});

const showBpmn = async () => {
  const container = document.querySelector('#canvas');
  const viewer = new BpmnJS({
    container
  });
  try {
    await viewer.importXML(props.diagramResourceRaw);
    viewer.get('canvas').zoom('fit-viewport', 'all');
  } catch (err) {
    console.log(err);
  }
};
onMounted(() => showBpmn());
</script>
<template>
  <div id="canvas"></div>
</template>
<style lang="scss" scoped>
#canvas {
  height: 800px;
}
</style>
